<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="icon sunny">
        <div class="sun">
            <div class="rays"></div>
        </div>
    </div>
    <style>
        body {
            background-color: currentColor;
            padding: 300px 300px;
        }

        .sun {
            width: 2.5em;
            height: 2.5em;
            margin: -1.25em;
            background: currentColor;
            border-radius: 50%;
            box-shadow: 0 0 0 0.375em orange;
            animation: spin 12s infinite linear;
        }

        .rays {
            position: absolute;
            top: -2em;
            left: 50%;
            display: block;
            width: 0.375em;
            height: 1.125em;
            margin-left: -0.1875em;
            background: yellow;
            border-radius: 0.25em;
            box-shadow: 0 5.375em yellow;
        }

        .rays:before,
        .rays:after {
            content: '';
            position: absolute;
            top: 0em;
            left: 0em;
            display: block;
            width: 0.375em;
            height: 1.125em;
            transform: rotate(60deg);
            transform-origin: 50% 3.25em;
            background: yellow;
            border-radius: 0.25em;
            box-shadow: 0 5.375em yellow;
        }

        .rays:before {
            transform: rotate(120deg);
        }

        @keyframes spin {
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</body>

</html>